<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript" src="../js/angular.min.js" ></script>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script type="text/javascript" src="../js/bootstrap.js" ></script>
		
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
	</head>
	<body ng-app="paginationApp" ng-controller="paginationCtrl">
		<table class="table table-bordered">
			<tr>
				<th>序号</th>
				<th>商品编号</th>
				<th>名称</th>
				<th>价格</th>
			</tr>
			<tr ng-repeat="product in products">
				<td>{{$index+1}}</td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
		</table>
		<div >
			<ul class="pagination pull-right">
				<li>
					<a href ng-click="prev()">上一页</a>
				</li>
				<li ng-repeat="page in pageList" ng-class="{active:isActivePage(page)}">
					<a href ng-click="selectPage(page)">{{page}}</a>
				</li>
				<li>
					<a href ng-click="prev()">下一页</a>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var paginationApp=angular.module("paginationApp",[]);

		paginationApp.controller("paginationCtrl",["$scope","$http",function($scope,$http){
	
    		$scope.currentPage = 1;
    		$scope.pageSize = 4;
    		$scope.totalCount = 0;
    		$scope.totalPage = 0;
    		
    		$scope.pageList = new Array();
    		$scope.prev = function(){
    			$scope.selectPage($scope.currentPage-1);
    		}
    		$scope.next = function(){
    			$scope.selectPage($scope.currentPage+1);
    		}

    		$scope.selectPage = function(page){
    		debugger;
    			if($scope.totalPage != 0 && (page< 1|| page > $scope.totalPages)){
    				return;
    			}

    			$http ({   
						method: 'GET',
    					url: '6_'+page+'.json',
    					params : {
    						page : page,
    						pageSize : $scope.pageSize
    					}
    			}).success(function(data,status,headers,config){  
    					$scope.products = data.products;
    					$scope.totalCount=data.totalCount;
    					$scope.totalPages = Math.ceil($scope.totalCount/$scope.pageSize);
    					$scope.currentPage = page;
					
    					var begin;
    					var end;
    					begin = $scope.currentPage-5;
    					if(begin <1){
    						begin = 1;
    					}
    					
    					end = begin +9;
    					if(end > $scope.totalPages){
    						end = $scope.totalPages;
    					}
    					
    					begin = end -9;
    					if(begin < 1){
    						begin = 1;
    					}
    					
    					for(var i = begin ; i<= end; i++){
    						$scope.pageList.push(i);
    					}
    			}).error(function(data,status,headers,config) { 
    				alert('出错，请联系管理员')
    			});	
    			
    			$scope.isActivePage = function(page){
    				return page === $scope.currentPage;
    			}
    		}
    		$scope.selectPage(1);
		}]);
		
	</script>
</html>
